<!--
 * @Author: 李环玉 834654733@qq.com
 * @Date: 2023-12-24 23:04:45
 * @LastEditors: 李环玉 834654733@qq.com
 * @LastEditTime: 2023-12-24 23:05:47
 * @FilePath: \vue3-ts-vite\src\views\user\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="userInfo">
    <h2>博主信息管理</h2>
    <div class="userInfo_main" v-loading="loading">
      <div class="userInfo_left">
        <vxForm
          ref="formRef"
          :formData="formData"
          :formItems="formColumn"
          />
      </div>
      <div class="userInfo_right">
        <p>头像：</p>
        <div class="userInfo_right-img">
          <img :src="imgUrl" alt="avatar">
          <cuntImg @imgCunt="imgCunt" />
        </div>
      </div>
    </div>
    <div class="userInfo-button">
      <el-button type="primary" @click="submit">{{ $t(lang.save) }}</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import vxForm from "@/components/vx-form/index.vue";
import cuntImg from "@/components/cunt-img/index.vue";
import { getUserInfo,uploadAvatar,editAdmin } from "@/api/login"
import formItems from "./data";
const lang:any = reactive(inject('langs'))
const formData = ref()
const formColumn = ref(formItems)
let loading = ref(false)
let imgUrl = ref('')
let files = ref()
const getuserInfo = async () => {
  loading.value = true
  const res = await getUserInfo({})
  if(res.code == 200){
    formData.value = res.data[0]
    imgUrl.value = res.data[0].avatar
    loading.value = false
  }
}
const imgCunt = async (files:any) => {
  imgUrl.value = files.dataURL
  const res = await uploadAvatar({file:files.file})
  if(res.code == 200){
    formData.value.avatar = process.env.VUE_IMG_BASE_URL +'upload/' + res.data.newFilename
  }
}
const submit = async() =>{
  delete formData.value.passWord
  const res = await editAdmin(formData.value)
  if(res.code == 200){
    ElMessage({
      message: res.message,
      type: 'success',
    })
    getuserInfo()
  } else {
    ElMessage.error(res.message)
  }
}
onMounted(() => {
  getuserInfo()
})
</script>

<style scoped lang="scss">
.userInfo {
  background-color: #fff;
  border-radius: 4px;
  padding: 2%;
  min-height: 500px;
  width: 96%;
  h2{
    font-size: 24px;
    margin-bottom: 40px;
  }
  &_main{
    width: 100%;
    display: flex;
  }
  &_left{
    width: 50%;
    // background: rebeccapurple;
    margin-right: 20px;
  }
  &_right{
    width: 46%;
    display: flex;
    
    &-img{
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      img{
        width: 100px;
        height: 100px;
        border-radius: 4px;
        margin-bottom: 5px;
      }
    }
  }
  &-button{
    text-align: center;
  }
}
</style>